<!--
 * @Author: “ChengNan” 1429323234@qq.com
 * @Date: 2024-06-04 14:40:55
 * @LastEditors: “ChengNan” 1429323234@qq.com
 * @LastEditTime: 2024-06-04 18:06:59
 * @FilePath: /src/components/NumberAnimation.vue
 * @Description: 
-->
<template>
  <div class="number-animation-cube" ref="number-animation-cube">
    <div class="cube-prepose" :style="{
      left: '0px',
      bottom: '0px',
      transition: `all ${transition}s ease-in-out`,
      transform: `translateX(${translateX}px) translateY(${translateY}px)`
    }">
      <div 
        v-for="(item, index) in list" 
        :key="index" 
        :style="{
          width:  width + 'px',
          height:  height + 'px',
        }"
        class="cube-animation-fade">
        <span>{{ item }}</span>
      </div>
    </div>

    
  </div>
</template>

<script>
export default {
  name: 'NumberAnimation',
  props: {
    count: {
      type: Number,
      default: 0,
    },
    duration: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      number: 0,
      list: [],
      width: 30,
      height: 30,
      translateX: 0,
      translateY: 0,
      
    }
  },
  computed: {
    transition() {
      return +this.duration / 1000
    }
  },
  watch: {
    count: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        // 步进
        this.translateY = newValue * this.height
      }
    }
  },
  mounted() {
    this.list = Array(10).fill().map((el, i) => i).reverse()
    this.getRect()
  },
  beforeDestroy() {
    this.ob.disconnect()
  },
  methods: {
    getRect() {
      const dom = this.$refs['number-animation-cube']
      const { width = 30, height = 30 } = dom.getBoundingClientRect()
      this.width = width
      this.height = height
    }
  },
}
</script>

<style scoped>
.number-animation-cube {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}
.cube-prepose {
  position: absolute;
  box-sizing: border-box;
}
.cube-animation-fade {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>